<template>
  <div class="body">
    <!-- 顶部导航栏 -->
    <div class="Navigation_top">
      <!-- 返回的盒子 -->
      <div class="get_back_box">
        <img src="../assets/return.png" alt="" @click="targetPage(route.query.id)">
        <div class="line"></div>
        <router-link to="/">
          <img src="../assets/home.png" alt="">
        </router-link>
      </div>
      <p>发布评论</p>
    </div>
    <!-- 上传内容 -->
    <div class="issuance_box">
      <h1>评分</h1><van-rate v-model="value" color="#FDB246" size="30" />
    </div>
    <textarea name="" v-model="content" id="" placeholder="请输入评价"></textarea>
    评价15字,可获得10经验
    <div class="file_box">
      <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" />
    </div>
    <div class="file_btn" @click="utter">
      发表
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';//引入路由
import { Imgfile, IntrocomAdd } from '../api/scenic.js';//引入接口
import { showNotify, closeNotify, showToast } from 'vant';//弹窗
import { useRouter } from 'vue-router';
const user = JSON.parse(sessionStorage.getItem("user"));
console.log(user.id);
const router = useRouter();
function targetPage(id) {
  router.push({
    path: '/Introcom',
    query: {
      id: id
    }
  });
}
const route = useRoute();//获取到传参
console.log(route.query.id);
const value = ref(0);
const fileList = ref([]);
const content = ref('');
const img_url = ref('');

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  // 创建 FormData 对象
  const formData = new FormData();
  // 添加文件到 FormData，字段名根据后端接口要求设置（例如这里是 'file'）
  formData.append('file', file.file);
  Imgfile(formData).then(function (res) {
    img_url.value = res.data.url;
  });
};

// 发表评论按钮
function utter() {
  if (value.value == 0) {
    showNotify('请选择评分');
    return;
  }
  if (content.value == '') {
    showNotify('请输入评价');
    return;
  }
  if (fileList.value.length == 0) {
    showNotify('请选择图片');
    return;
  }
  console.log(img_url);
  IntrocomAdd({
    intri_id: route.query.id,
    score: value.value,
    content: content.value,
    img: img_url.value,
    user_id: user.id,
    pid: 0
  }).then(function (res) {
    console.log(res);
    if (res.code == 1) {
      showToast('添加成功');
      setTimeout(() => {
        window.history.back();
      }, 1000);
    }
  });
}
</script>

<style scoped>
a {
  display: inline;
  width: auto;
  height: 35px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  color: black;
  text-decoration: none;
  /* 可选：移除下划线 */
}

/* 导航栏 */
.Navigation_top {
  width: 100%;
  height: 40px;
  text-align: center;
  position: relative;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}

/* 返回按钮 */
.get_back_box {
  width: 60px;
  height: 60%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: space-around;
  border-radius: 15px;
  margin-top: 8px;
  margin-left: 10px;
  border: #999999 solid 1px;
}

.get_back_box img {
  width: 18px;
}

/* 分割线 */
.line {
  width: 1px;
  height: 60%;
  background-color: #999999;
}

/* 底部导航栏 */
.Navigation_bottom {
  width: 100%;
  padding: 1% 3%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.Navigation_bottom img {
  width: 20px;
}

.issuance_box {
  width: 100%;
  padding: 2%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

textarea {
  width: 100%;
  padding: 2%;
  height: 200px;
  border: 0px;
}

.file_box {
  margin-top: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.file_box img {
  width: 48%;
  border-radius: 5px;
  overflow: hidden;
}

.file_btn {
  width: 92%;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
  position: fixed;
  bottom: 0;
  margin-left: 4%;
  background-color: #FFC300;
}
</style>